<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
	$("#msg").hide();//页面初始时隐藏
	//添加Ajax全局事件的处理，只有$.ajax请求的golobal设置为false时不触发全局事件
	$("#msg").ajaxStart(function(){
		$("#msg").text("正在加载，请耐心等待....");
		$("#msg").fadeIn(500);
	});
	$("#msg").ajaxSuccess(function(){
	    $("#msg").text("加载完毕!!!!!");
		$("#msg").fadeOut(2000);
	});
	$("#msg").ajaxError(function(){
	    $("#msg").text("加载失败!!!!!");
		$("#msg").fadeOut(2000);
	});
	$("#msg").ajaxStop(function(){//load不触发ajaxsuccess事件，用来隐藏msg
		$("#msg").fadeOut(2000);
	});
	  //添加按钮的单击，发送Ajax请求，显示列表
		$("#loadBtn").click(function(){
		    //$("#pstable tr").remove();
			$.getJSON(
				"jsonarray.do",
				function(jsondata){
					//for(i=0;i<jsondata.length;i++){使用此方法要使用//$("#pstable tr").remove();
					//	var $tr = $("<tr><td>"+jsondata[i].id+"</td><td>"+jsondata[i].name+"</td><td>"+jsondata[i].age+"</td></tr>");
					//	$("#pstable").append($tr);
					//}
					var tr="";
					for(i=0;i<jsondata.length;i++){
						tr+= "<tr><td>"+jsondata[i].id+"</td><td>"+jsondata[i].name+"</td><td>"+jsondata[i].age+"</td></tr>";
					}
					$("#pstable").html($(tr));
				}
			);
		});
	});
	//加载person数据按钮处理
	$(function(){
		$("#loadBtn1").click(function(){
			$.post(
				"jsonobject.do",
				{id:11,name:"tom"},
				function(jsondata){
					var s = "编号:"+jsondata.id+"<br/>姓名:"+jsondata.name+"<br/>年龄:"+jsondata.age;
					//将s字符串放入id=person的span中
					$("#person").html(s);
				},
				"json"
			);
		});
	});
	//加载news.jsp页面按钮的处理，load不触发ajaxsuccess事件
	$(function(){
		$("#loadBtn2").click(function(){
			$("#news").load("news.jsp");
		});
	});
	
</script>
</head>
<body>
<input type="button" value="加载数据" id="loadBtn">
<div id="msg" style="position: absolute;top: 150px;left:200px;background:#FFF666;color:#FF0000"></div>
<br/>
<table id="pstable"></table>
<hr/>
<input type="button" value="加载person数据" id="loadBtn1">
<br/><span id="person"></span>
<hr/>
<input type="button" value="加载news.jsp页面" id="loadBtn2">
<div id="news"></div>
</body>
</html>